<template>
  <div class="contact-form">
    <ElForm
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-position="top"
      size="large"
    >
      <ElFormItem label="姓名" prop="name">
        <ElInput
          v-model="formData.name"
          placeholder="请输入您的姓名"
          :prefix-icon="User"
        />
      </ElFormItem>
      
      <ElFormItem label="邮箱" prop="email">
        <ElInput
          v-model="formData.email"
          placeholder="请输入您的邮箱"
          :prefix-icon="Message"
        />
      </ElFormItem>
      
      <ElFormItem label="主题" prop="subject">
        <ElInput
          v-model="formData.subject"
          placeholder="请输入邮件主题"
          :prefix-icon="Edit"
        />
      </ElFormItem>
      
      <ElFormItem label="留言内容" prop="message">
        <ElInput
          v-model="formData.message"
          type="textarea"
          :rows="6"
          placeholder="请输入您想说的话..."
          maxlength="500"
          show-word-limit
        />
      </ElFormItem>
      
      <ElFormItem>
        <ElButton
          type="primary"
          size="large"
          :loading="loading"
          @click="handleSubmit"
          style="width: 100%"
        >
          <ElIcon v-if="!loading"><Position /></ElIcon>
          {{ loading ? '发送中...' : '发送消息' }}
        </ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { User, Message, Edit, Position } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)
const loading = ref(false)

// 表单数据
const formData = reactive({
  name: '',
  email: '',
  subject: '',
  message: ''
})

// 验证规则
const rules = {
  name: [
    { required: true, message: '请输入您的姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请输入邮件主题', trigger: 'blur' },
    { min: 2, max: 50, message: '主题长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  message: [
    { required: true, message: '请输入留言内容', trigger: 'blur' },
    { min: 10, max: 500, message: '留言内容在 10 到 500 个字符', trigger: 'blur' }
  ]
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      
      // 模拟发送请求
      setTimeout(() => {
        loading.value = false
        ElMessage.success('消息发送成功！我会尽快回复您。')
        
        // 重置表单
        formRef.value.resetFields()
      }, 2000)
    } else {
      ElMessage.error('请填写完整的表单信息')
    }
  })
}
</script>

<style lang="scss" scoped>
.contact-form {
  background: var(--bg-primary);
  padding: $spacing-2xl;
  border-radius: $radius-lg;
  box-shadow: var(--shadow-lg);
}
</style>

